<script setup lang="ts">
import { ref, defineEmits } from "vue";
import type { UploadProps } from "element-plus";
import { ElMessage } from "element-plus";
import { addBranch, addBranchDto, UploadPic } from "@/api/idp/branch";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import AddFill from "@iconify-icons/ri/add-circle-line";

const emit = defineEmits(["onSearchEnv"]);
const onSearchTable = () => {
  emit("onSearchEnv");
};

const formArgus = ref<addBranchDto>({
  name: "",
  cityCode: "",
  lng: "",
  lat: "",
  planePic: "",
  titlePic: "",
  admin: "",
  tel: ""
});
const dialogVisible = ref(false);
// 经纬度信息
const lnglat = ref("");
// 分支机构的平面图和门头照片
const fileList = ref();

const showdialogForAdd = () => {
  formArgus.value = {
    name: "",
    cityCode: "",
    lng: "",
    lat: "",
    planePic: "",
    titlePic: "",
    admin: "",
    tel: ""
  };
  lnglat.value = "";
  fileList.value = [];
  dialogVisible.value = true;
};

const onSubmit = () => {
  const arr = lnglat.value.split(",");
  if (arr.length != 2) {
    ElMessage({
      message: "请输入正确的经纬度信息",
      type: "warning"
    });
    return;
  }
  formArgus.value.lng = arr[0];
  formArgus.value.lat = arr[1];
  addBranch(formArgus.value).then(() => {
    dialogVisible.value = false;
    onSearchTable();
  });
};

defineExpose({
  showdialogForAdd
});

const handlTitlePicSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  console.log(">>", response, uploadFile);
  formArgus.value.titlePic = response;
  fileList.value = [uploadFile];
};
</script>

<template>
  <el-dialog v-model="dialogVisible" title="添加分支机构">
    <el-form ref="elForm" :model="formArgus" label-width="100px">
      <el-form-item label="分支机构">
        <el-input
          v-model="formArgus.name"
          placeholder="eg: 中北路营业部"
          :maxlength="50"
          show-word-limit
          clearable
        />
      </el-form-item>
      <el-form-item label="行政编码">
        <el-input
          v-model="formArgus.cityCode"
          placeholder="eg：420000"
          :maxlength="6"
          show-word-limit
          clearable
          :style="{ width: '100%' }"
        />
      </el-form-item>
      <el-form-item label="经纬度">
        <el-input
          v-model="lnglat"
          placeholder="eg: 116.399095,39.943485"
          show-word-limit
          clearable
          :style="{ width: '100%' }"
        />
      </el-form-item>
      <el-form-item label="管理员">
        <el-input
          v-model="formArgus.admin"
          placeholder="例如: 刘恒泰"
          show-word-limit
          clearable
          :style="{ width: '100%' }"
        />
      </el-form-item>
      <el-form-item label="联系方式">
        <el-input
          v-model="formArgus.tel"
          placeholder="例如: 10086"
          show-word-limit
          clearable
          :style="{ width: '100%' }"
        />
      </el-form-item>
      <el-form-item label="门头照片" prop="code">
        <el-upload
          :file-list="fileList"
          action=""
          :http-request="UploadPic"
          list-type="picture-card"
          :on-success="handlTitlePicSuccess"
        >
          <el-button link type="primary" :icon="useRenderIcon(AddFill)">
            选择文件
          </el-button>
          <template #file="{ file }">
            <div>
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
            </div>
          </template>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="onSubmit"> 提交 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped></style>
